<script lang="ts" setup>
import { computed } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { SvgDoudianIcon } from '@vben/icons';

import { in1688ToDoudianStore } from '#/store/modules';

import { checkBeforePublish } from './addInSysProduct';

const in1688ToDoudian = in1688ToDoudianStore();
const selectShopData = computed(() => {
  return in1688ToDoudian.shopTabs.find(
    (item: any) => item.shopId === in1688ToDoudian.nowSelectTab,
  );
});
const [Modal, modalApi] = useVbenModal({
  fullscreen: true,
  showCancelButton: false,
  showConfirmButton: false,
  onCancel() {
    modalApi.close();
  },
  onConfirm() {
    // console.log('确认发布', selectShopData);
    checkBeforePublish([
      in1688ToDoudian.shopTabs.find(
        (item: any) => item.shopId === in1688ToDoudian.nowSelectTab,
      ),
    ]);
  },
});
</script>
<template>
  <Modal>
    <template #title>
      <a-space align="center">
        <div class="text-base font-bold">当前编辑店铺商品</div>
        <div class="">
          <a-space :size="2" align="center">
            <SvgDoudianIcon class="size-5" />
            <div>
              {{ selectShopData.shopName }}
            </div>
          </a-space>
        </div>
      </a-space>
    </template>
    <template #append-footer>
      <a-space>
        <a-button :loading="in1688ToDoudian.lodingBool" @click="modalApi.close">
          取消
        </a-button>

        <a-button
          :loading="in1688ToDoudian.lodingBool"
          type="primary"
          @click="modalApi.onConfirm"
        >
          全部发布
        </a-button>
      </a-space>
    </template>
    <!-- <template #prepend-footer> 12465 </template> -->
    <a-spin
      :spinning="in1688ToDoudian.lodingBool"
      tip="正铺货中，请稍等..."
      wrapper-class-name="h-full overflow-hidden herhterss"
    >
      <div class="flex h-full">
        <div
          class="mr-4 h-full scroll-m-0 scroll-p-0 overflow-y-scroll scroll-smooth pr-2"
        >
          <Productlist />
        </div>
        <div
          class="h-full flex-1 scroll-m-0 scroll-p-0 overflow-y-scroll scroll-smooth pl-4 pr-2"
        >
          <DetailContent />
        </div>
      </div>
    </a-spin>
  </Modal>
</template>
<style lang="scss">
.herhterss {
  .ant-spin-container {
    height: 100%;
    overflow: hidden;
  }
}
</style>
